<!DOCTYPE html>
<html>
<head>
<title>代码生成器</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="plugins/jqgrid/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="libs/jquery.min.js"></script>
<script src="plugins/layer/layer.js"></script>
<script src="libs/bootstrap.min.js"></script>
<script src="libs/vue.min.js"></script>
<script src="plugins/jqgrid/grid.locale-cn.js"></script>
<script src="plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="js/common.js"></script>
<style type="text/css">
.file{
  margin-top: 20px;
  margin-left: 20px;
}
  .block {
    margin-bottom: 30px;
    margin-top: 20px;
    height: 30px;
    line-height: 30px;
  }

  .block span {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-size: 14px;
    float: left;
    margin-right: 15px;
  }

  .block input {
    background: #363738;
    height: 30px;
    width: 300px;
    border: #363738;
    color: #ffffff;
    padding-left: 15px;
  }

  .block .block-label {
    width: 320px;
    height: 30px;
    background: #fff;
    margin: 0;
    float: left;
    padding-left: 15px;
    color: #cccccc;
    border: 1px solid;
  }
  
    .block .block-text {
    width: 320px;
    height: 30px;
    background: #fff;
    margin: 0;
    float: left;
    padding-left: 15px;
    color: #cccccc;
    border: 1px solid;
  }

  /* 文件上传样式 */

  .btn_addPic {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 30px;
    overflow: hidden;
    border: 1px solid #f9c100;
    background: #f9c100;
    color: #000;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
  }
  
   .button_upload {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 30px;
    overflow: hidden;
    border: 1px solid #f9c100;
    background: #f9c100;
    color: #000;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
  }

  .btn_addPic:hover {
    cursor: pointer;
  }

  .filePrew {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 39px;
    font-size: 100px;
    opacity: 0;
    filter: alpha(opacity=0);
    /* 兼容IE */
  }
</style>
</head>

<body>

	
	<div class="panel panel-default">
    <div class="panel-heading">功能说明：从excel中生成mysql的sql语句，是一个快速造数据的良好工具</div>
    <div style="padding: 10px 0 20px 10px;">
	
	<div id="rrapp">
		<div class="grid-btn">
	

				<form class="am-form am-form-horizontal" action="/excel/data/generatormysql/code" method="post" enctype="multipart/form-data">
    							 
    							<!--    请选择文件：<input type="file" name="file" class="am-u-sm-3 am-form-label" style="">
    					
    							 
    							 请输入表名:<input type="text" id="tableName" name="tableName" placeholder="表名">
    							 
    							<div class="am-form-group">
                            	<div class="am-u-sm-9 am-u-sm-push-3">
    							<button type="submit" class="am-btn am-btn-primary">上传</button>
    							</div>
                        		</div>	-->

					<div class="file"></div>
					<div class="block">
					<div>
						<span>请选择文件：</span> <label class="block-label" for="fileupload" id="label"></label>
						 <a class="btn_addPic"
							href="javascript:void(0);" id="fileupload"> 浏览 <input
							class="filePrew" type="file" id="upload" name="file"
							onchange="getFileSize(this.value)">
						</a>
						</div>
						<div>
							<span>请输入表名：</span> 
							<input type="text" class="block-text" id="tableName" name="tableName" placeholder="表名">
							<button type="submit" class="button_upload">生成sql</button>
						</div>
					</div>
				</form>

		</div>
	</div>
	    </div>
</div>
	<script src="js/generator.js"></script>
	  <script>
    var card = document.getElementById('label');
    function getFileSize(v) {
    	$('#label').text(v)
      //card.innerHtml = v;
      console.log($('#label').text())
    }
  </script>
</body>
</html>